﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>银商通支付通信前置系统</title>
	<link rel="icon" href="img/txqz.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="img/txqz.ico" type="image/x-icon" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="银商通支付通信前置系统">
	<meta name="author" content="sheungxin">
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="js/html5.js"></script><script src="js/css3-mediaqueries.js"></script><![endif]-->
	<link rel="stylesheet" type="text/css" href="css/cloud-admin.css" >
	
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- DATE RANGE PICKER -->
	<link rel="stylesheet" type="text/css" href="js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
	<!-- UNIFORM -->
	<link rel="stylesheet" type="text/css" href="js/uniform/css/uniform.default.min.css" />
</head>
<body class="login">	
	<!-- PAGE -->
	<section id="page">
			<!-- HEADER -->
			<header>
				<!-- NAV-BAR -->
				<div class="container">
					<div class="row">
						<div class="col-md-4 col-md-offset-4">
							<div id="logo">
							</div>
						</div>
					</div>
				</div>
				<!--/NAV-BAR -->
			</header>
			<!--/HEADER -->
			<!-- LOGIN -->
			<section id="login" class="visible">
				<div class="container">
					<div class="row">
						<div class="col-md-6 col-md-offset-3">
							<div class="login-box-plain">
								<h2 class="bigintro">银商通支付通信前置系统</h2>
								<div class="divide-40"></div>
								<form role="form" id="loginForm">
								  <div class="form-group">
									<label for="name">用户名</label>
									<i class="fa fa-envelope"></i>
									<input type="text" class="form-control" id="name" name="name">
								  </div>
								  <div class="form-group"> 
									<label for="password">密码</label>
									<i class="fa fa-lock"></i>
									<input type="password" class="form-control" id="password" name="password">
								  </div>
								  <div id="errMes" style="color:red" class="hidden"></div>
								  <div class="form-actions">
									<button type="submit" class="btn btn-danger">登录</button>
								  </div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!--/LOGIN -->
	</section>
	<!--/PAGE -->
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	
	<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<script src="js/jquery-validate/jquery.validate.min.js"></script>
	<script src="js/jquery-validate/myvalidate.js"></script>
	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>
	<script>
		$('#loginForm').validate({  
            errorElement : 'span',  
            errorClass : 'help-block',
            focusInvalid : false,  
            rules : {  
            	"name" : {  
                    required : true
                },
                "password" : {  
                    required : true,
                    regex: "^[A-Za-z0-9\@\!\#\$\%\^\&\*\.\~\-]{6,18}$"
                }
            },  
            messages : {  
            	"name" : {  
                    required : "请输入用户名"
                },  
                "password" : {  
                	required : "请输入密码",
                	regex : "密码为6~18位非中文字符"
                }
            }, 
            highlight : function(element) {
                $(element).closest('.form-group').addClass('has-error');  
            },
            success : function(label) {
                label.closest('.form-group').removeClass('has-error');
                label.remove();  
            },
            errorPlacement : function(error, element) {
                element.parent('div').append(error);  
            },
            submitHandler : function(form) {
            	var formParam = $("#loginForm").serialize();
            	
			    $.ajax({    
			        type:'post',  
			        url:'sys/users/loginIn',    
			        data:formParam,   
			        dataType:'json',    
			        success:function(response){
			        	if(response.meta.success){
			        		window.parent.location.href = "<%=path%>/manage/index.jsp";
			        	}else{
			        		$("#errMes").html(response.meta.message);
			        		$("#errMes").removeClass("hidden");
			        		$("#errMes").addClass("show");
			        		setTimeout(function(){
			        			$("#errMes").html();
			        			$("#errMes").addClass("hidden");
			        		} , 5000);
			        	}
			        }
			    });
            	return false;
            }  
        });
	</script>
</body>
</html>